<template>
	<view :class="[primarySize()]">
		<view class="page-foot">
			<Footer :identity="2" :footState="2" :num="megNum"></Footer>
		</view>
		<view class="container">
			<view class="page-head" :class="[showFilter?'bg2a':'']">
				<hx-navbar ref="hxnb" :config="config"></hx-navbar>
			</view>
			<swiper :style="{marginTop:barHeight+'px'}" class="find_swiper" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000"
				indicator-color="#fff" indicator-active-color="#fff">
				<swiper-item v-for="(item,index) in banners">
					<image :src="cdnurl(item.image)" mode="aspectFill" class="banner"></image>
				</swiper-item>
			</swiper>
			<view class="search_nav flex-box">
				<view class="flex-box" @click="jumpLoacte">
					<image :src="iconPath('icon_address.png')" mode="widthFix" class="ico25">
					</image>
					<view class="address_nav fwb fs24 col1 m-ellipsis">{{currentCity?currentCity.name:'城市'}}
					</view>
					<image src="@/static/public/arrow_down.png" mode="widthFix" class="ico17"></image>
				</view>
				<input type="text" confirm-type="search" @confirm="search" v-model="query.q" placeholder="请输入人才求职意向进行搜索" class="flex-grow-1 inp_nav"
					placeholder-class="cola5" />
				<image src="@/static/public/icon_search1.png" mode="aspectFill" class="ico32"></image>
			</view>
			<view class="tab_nav flex-box flex-between plr60" :class="[showFilter?'fixed':'']"
				:style="{'top':showFilter?`${barHeight}px`:0}"
				>
				<view class="tab_item flex-box" :class="[filterTabIndex==0&&showFilter?'active':'']" @click="chooseItem(0)">
					<view class="col6 fs28">行业</view>
				</view>
				<view class="tab_item flex-box" :class="[filterTabIndex==1&&showFilter?'active':'']" @click="chooseItem(1)">
					<view class="col6 fs28">薪资</view>
				</view>
				<view class="tab_item flex-box" :class="[filterTabIndex==2&&showFilter?'active':'']" @click="chooseItem(2)">
					<view class="col6 fs28">其他</view>
					
				</view>
			</view>
			<view class="tab_nav" v-if="soft"></view>

			<view class="plr30">

				<resume-list :resumes="resumes"></resume-list>

				<view class="nothing" v-if="resumesMore.nothing">
					<image src="/static/public/icon_nothing.png" mode="aspectFit"></image>
					<text>暂无人才数据</text>
				</view>
				<view class="g-btn3-wrap" v-else>
					<view class="g-btn3" @click="fetch()">{{resumesMore.text}}</view>
				</view>

			</view>



			<u-popup :show="showFilter" mode="top" :safeAreaInsetBottom="false" @close="bindClose" bgColor="transparent">
				<view class="popup" :style="{'marginTop':`calc(${barHeight}px + 88rpx)`}">
					<template v-if="filterTabIndex==0">
						<view class="pop_scroll i">
							<scroll-view scroll-y class="pop_left">
								<view class="item m-ellipsis" :class="{active: filterTab2SubIndex==-1}" @click="bindCategoryPick(-1)">不限</view>
								<view class="item m-ellipsis" :class="{active: index==filterTab2SubIndex}" @click="bindCategoryPick(index)" v-for="(item,index) in categories">{{item.category_name}}</view>
							</scroll-view>
							<scroll-view scroll-y="true" class="pop_right pl30">
								<view class="scroll_item m-ellipsis" :class="{active: query.category_id==0}" @click="bindCategoryChange(0)">不限</view>
								<view class="scroll_item m-ellipsis" :class="{active: query.category_id==item.id}" @click="bindCategoryChange(item.id)" v-for="(item,index) in subCategories">{{item.category_name}}</view>
								
							</scroll-view>
						</view>
					</template>
					<template v-if="filterTabIndex==1">
						<view class="pop_scroll i">
							<scroll-view scroll-y class="pop_left">
								<!-- <view class="item m-ellipsis" :class="{active: filterTab3SubIndex==0}" @click="bindTabSubIndexChange(0)" >不限</view> -->
								<view class="item m-ellipsis" :class="{active: filterTab3SubIndex==1}" @click="bindTabSubIndexChange(1)" >按月结算</view>
								<!-- <view class="item m-ellipsis" :class="{active: filterTab3SubIndex==2}" @click="bindTabSubIndexChange(2)" >按天结算</view>
								<view class="item m-ellipsis" :class="{active: filterTab3SubIndex==3}" @click="bindTabSubIndexChange(3)" >按小时结算</view> -->
								
							</scroll-view>
							<scroll-view scroll-y="true" class="pop_right pl30" v-if="filterTab3SubIndex==1">
								<view class="scroll_item m-ellipsis" :class="(!query.salary_id)?'active':''" @click="bindSalaryOptionChange" data-type="3" data-id="-1">不限</view>
								<view class="scroll_item m-ellipsis" :class="(query.salary_id==item.id)?'active':''" @click="bindSalaryOptionChange" data-type="3" :data-id="item.id" v-for="(item,index) in monthlySalaryOptions">{{item.name}}</view>
								
							</scroll-view>
						</view>
					</template>
					<scroll-view scroll-y="true" v-if="filterTabIndex==2" class="pop_scroll">
			
						<template>
							<view class="pt20"></view>
							<view class="fs32 fwb col3">年龄要求</view>
							<view class="pt15">
								<view class="scroll_item m-ellipsis" :class="query.age?'':'active'" @click="bindQueryParamChange" data-param="age" data-value="">不限</view>
								<view class="scroll_item m-ellipsis" :class="query.age=='16,20'?'active':''" @click="bindQueryParamChange" data-param="age" data-value="16,20">16-20岁</view>
								<view class="scroll_item m-ellipsis" :class="query.age=='20,30'?'active':''" @click="bindQueryParamChange" data-param="age" data-value="20,30">20-30岁</view>
								<view class="scroll_item m-ellipsis" :class="query.age=='30,35'?'active':''" @click="bindQueryParamChange" data-param="age" data-value="30,35">30-35岁</view>
								<view class="scroll_item m-ellipsis" :class="query.age=='35,40'?'active':''" @click="bindQueryParamChange" data-param="age" data-value="35,40">35-40岁</view>
								<view class="scroll_item m-ellipsis" :class="query.age=='40,45'?'active':''" @click="bindQueryParamChange" data-param="age" data-value="40,45">40-45岁</view>
								<view class="scroll_item m-ellipsis" :class="query.age=='50,55'?'active':''" @click="bindQueryParamChange" data-param="age" data-value="50,55">50-55岁</view>
								<view class="scroll_item m-ellipsis" :class="query.age=='55,60'?'active':''" @click="bindQueryParamChange" data-param="age" data-value="55,60">55-60岁</view>
								<view class="scroll_item m-ellipsis" :class="query.age=='60'?'active':''" @click="bindQueryParamChange" data-param="age" data-value="60">60岁以上</view>
								
							</view>
						</template>
						<template>
							<view class="pt20"></view>
							<view class="fs32 fwb col3">性别要求</view>
							<view class="pt15">
								<view class="scroll_item m-ellipsis" :class="query.gender?'':'active'" @click="bindQueryParamChange" data-param="gender" data-value="">不限</view>
								<view class="scroll_item m-ellipsis" :class="query.gender=='1'?'active':''" @click="bindQueryParamChange" data-param="gender" data-value="1">男</view>
								<view class="scroll_item m-ellipsis" :class="query.gender=='2'?'active':''" @click="bindQueryParamChange" data-param="gender" data-value="2">女</view>
								
							</view>
						</template>
						<template>
							<view class="pt20"></view>
							<view class="fs32 fwb col3">学历要求</view>
							<view class="pt15">
								<view class="scroll_item m-ellipsis" :class="query.education_level_id?'':'active'" @click="bindQueryParamChange" data-param="education_level_id" data-value="">不限</view>
								<view class="scroll_item m-ellipsis" :class="query.education_level_id==item.id?'active':''" @click="bindQueryParamChange" data-param="education_level_id" :data-value="item.id" v-for="(item,index) in educationLevels">{{item.name}}</view>
							</view>
						</template>
						<template>
							<view class="pt20"></view>
							<view class="fs32 fwb col3">经验要求</view>
							<view class="pt15">
								<view class="scroll_item m-ellipsis" :class="query.work_experience_id?'':'active'" @click="bindQueryParamChange" data-param="work_experience_id" data-value="">不限</view>
								<view class="scroll_item m-ellipsis" :class="query.work_experience_id==item.id?'active':''" @click="bindQueryParamChange" data-param="work_experience_id" :data-value="item.id" v-for="(item,index) in workExperiences">{{item.name}}</view>
							</view>
						</template>
						<view class="pt30"></view>
					</scroll-view>
					<view class="pop_bottom flex-box" v-if="filterTabIndex==2">
						<view class="bt1" @click="bindResetFormQuery">重置</view>
						<view class="bt2" @click="bindFormQueryConfirm">确认</view>
					</view>
				</view>
			</u-popup>
		</view>

	</view>
</template>

<script>
	import resumeList from '../../components/resume-list/resume-list.vue';
	const app = getApp();
	export default {
		components: {
			resumeList
		},
		data() {
			return {
				
				config: {
					color: '#fff',
					back: false,
					title: '找人才',
					//背景颜色;参数一：透明度（0-1）;参数二：背景颜色（array则为线性渐变，string为单色背景）
					backgroundColor: [1, 'var(--primary)'],
					slideBackgroundColor: [1,'var(--primary)'],
					statusBarFontColor: ['#ffffff', '#ffffff']
				},
				
				megNum: 0,
				userinfo: null,
				banners: [],
				showFilter: false, //显示条件弹出层
				filterTabIndex: 0, //条件层tab index
				filterTab2SubIndex: -1,
				filterTab3SubIndex: 1,
				categories: [],
				subCategories: [],
				monthlySalaryOptions: [],
				educationLevels: [],
				workExperiences: [],
				resumes: [],
				resumesMore: {
					page: 1
				},

				query: {},
				soft: false,
				statusBarHeight: null,
				barHeight: null,
				showFilter: false, //显示条件弹出层
				filterTabIndex: 0, //条件层tab index
				currentCity: null,
				refreshOnShow:false
			}
		},
		onLoad() {
			
			let page = this;
			
			this.currentCity = this.$core.getCurrentCity();
			page.statusBarHeight = uni.getSystemInfoSync().statusBarHeight;
			// 胶囊数据
			// #ifdef MP
			const {
				top,
				height
			} = wx.getMenuButtonBoundingClientRect();
			// #endif
			page.barHeight = 44 + page.statusBarHeight;
			if (this.$core.getUserinfo()) {
				this.userinfo = this.$core.getUserinfo()
			}
			this.refreshPage();

			uni.$on(app.globalData.Events.UserLogin, this.eventOnUserLogin, this);
			uni.$on(app.globalData.Events.UserLogout, this.eventOnUserLogout, this);
			uni.$on(app.globalData.Events.CurrentCityChange, this.eventOnCurrentCityChange, this);
//未读消息
			if (app.globalData.chat_config.SocketTask) {
				this.$chatIM.setMessageBadge(false)
			}
			uni.$on(app.globalData.Events.WebsocketMessageCount, this.eventWebsocketMessageCount, this);
		},
		onShow() {
			
			if (this.refreshOnShow) {
				this.refreshOnShow = false;
				this.refreshPage();
			}
		},
		onReachBottom() {
			this.fetch();
		},
		onUnload() {
			uni.$off(app.globalData.Events.CurrentCityChange, this.eventOnCurrentCityChange);
			uni.$off(app.globalData.Events.UserLogin, this.eventOnUserLogin);
			uni.$off(app.globalData.Events.UserLogout, this.eventOnUserLogout);
			uni.$off(app.globalData.Events.WebsocketMessageCount, this.eventWebsocketMessageCount);
		},
		onPullDownRefresh() {
			this.refreshPage()
		},
		methods: {
			search() {
			    this.refresh();
			},
			jumpLoacte() {
				uni.navigateTo({
					url: '/pages/public/locate'
				})
			},
			eventOnCurrentCityChange(currentCity) {
				this.currentCity = currentCity;
				let pages = getCurrentPages();
				//如果当前页面正在显示, 刷新此页； 否则下次显示时刷新
				if (pages[pages.length - 1] === this) {
					this.refreshPage();
				} else {
					this.refreshOnShow=true
				}
			},
			chooseItem(index) {
				this.showFilter = this.filterTabIndex == index ? !this.showFilter : true;
				this.filterTabIndex = index;
			},
			bindClose(){
				this.showFilter = false
				this.filterTabIndex = 0;
			},
			//一级分类
			bindCategoryPick(index){
				 if(index==-1) {
					//不限分类
					this.filterTab2SubIndex = index,
					this.query.category_id = 0;
					this.subCategories = [];
					this.refresh();
				}else {
					this.filterTab2SubIndex = index;
					this.subCategories = this.categories[index].childlist;
				}
			},
			// 选择二级分类
			bindCategoryChange (id) {
			    this.query.category_id = id
			    this.refresh();
			},
			bindTabSubIndexChange (index) {
			    this.filterTab3SubIndex = index;
			    if(index===0) {
					//选择薪资类型不限
					this.query.salary_type = '';
					this.query.salary_min = '';
			        this.query.salary_max = '';
			        this.query.salary_option_id = '';
					this.refresh();
			    }
			},
			//选择薪资
			bindSalaryOptionChange (event) {
			    this.query.salary_id = event.currentTarget.dataset.id==-1?'':event.currentTarget.dataset.id;
				this.$forceUpdate();
			    this.refresh();
			},
			bindQueryParamChange: function (event) {
			    let param = event.currentTarget.dataset.param, value = event.currentTarget.dataset.value;
			    this.query[param] = value === true ? '' : value;
				this.$forceUpdate();
			},
			//重置
			bindResetFormQuery: function () {
				this.query = {};
				this.$forceUpdate();
			},
			bindFormQueryConfirm: function () {
			    this.refresh();
			},
			//刷新
			refreshPage() {
				let page = this;
				let userinfo = this.userinfo;
				this.resumes = [];
				this.resumesMore = {
					page: 1
				};
				this.$util.getJobCategories(2, false).then(categories => {
					page.categories = categories
				});
				this.$util.getSalaryOptions(3, false).then(options => {
					page.monthlySalaryOptions = options
				});
				this.$util.getWorkExperienceOptions().then(options => {
					page.workExperiences = options
				});
				this.$util.getEducationLevels().then(levels => {
					page.educationLevels = levels
				});
				// this.$util.getBenefits().then(benefits => {
				// 	page.benefits = benefits
				// });
				this.fetchBanners();
				this.refresh();
				uni.stopPullDownRefresh();
			},
			fetchBanners() {
				let groupId = this.userinfo && this.userinfo.group_id != 1 ? 2 : 1;
				this.$core.get({
					url: 'xilujob.banner/banners/group/resume_index',
					data: {
						group_id: groupId
					},
					loading: false,
					success: ret => {
						this.banners = ret.data;
					}
				});
			},
			refresh(clearQuery = false) {
				this.resumes = [];
				this.resumesMore = {
					page: 1
				};
				if (clearQuery)
					this.query = {};
				this.fetch();
				this.showFilter = false;
				//this.hideFilter();
			},
			fetch() {
				let query = this.query;
				query.pagesize = 10;
				this.$util.fetch(this, 'xilujob.resume/lists', query, 'resumesMore', 'resumes', 'data', data => {

				})
			},
			eventOnUserLogin(userinfo) {
				this.userinfo = userinfo;
			},
			eventOnUserLogout() {
				this.userinfo = null;
			},
			eventWebsocketMessageCount(data) {
				this.megNum = this.userinfo ? app.globalData.chat_config.messageCount : 0;
			},
		}
	}
</script>

<style lang="scss" scoped>
	.page-head {
		z-index: 20000;
	}

	.find_swiper {
		width: 100%;
		height: 340rpx;
		position: relative;
		z-index: 1;

		.banner {
			width: 100%;
			height: 100%;
			display: block;
		}
	}

	.search_nav {
		margin-top: -43rpx;
		position: relative;
		width: 690rpx;
		height: 86rpx;
		background: #FFFFFF;
		border-radius: 18rpx;
		margin-left: auto;
		margin-right: auto;
		padding: 0 30rpx;
		z-index: 2;
		.address_nav {
			max-width: 112rpx;
			padding-left: 20rpx;
			padding-right: 15rpx;
		}
		.inp_nav {
			position: relative;
			margin-left: 30rpx;
			padding: 0 30rpx;
			font-size: 28rpx;
			color: var(--normalBlack);
			position: relative;
		}
		
		.inp_nav:before {
			content: '';
			width: 1px;
			height: 34rpx;
			background: #ECECEC;
			position: absolute;
			top: 50%;
			left: 0;
			transform: translateY(-50%);
		}
	}

	.tab_nav {
		width: 100%;
		height: 104rpx;
		padding-top: 40rpx;
		padding-bottom: 30rpx;

		&.fixed {
			position: fixed;
			left: 0;
			right: 0;
			z-index: 10077;
			background: #fff;
			height: 104rpx;
			top: 0;
		}

		.tab_item {
			height: 34rpx;
		}
		.tab_item.active::after {
			border-left-color: transparent;
			border-right-color: transparent;
			border-top-color: transparent;
			border-bottom-color: var(--primary);
			margin-top: -5rpx
		}
		
		.tab_item::after {
			content: '';
			width: 0px;
			height: 0px;
			border: 10rpx solid #666;
			border-left-color: transparent;
			border-right-color: transparent;
			border-top-color: #999999;
			border-bottom-color: transparent;
			margin-left: 16rpx;
			margin-top: 10rpx;
			line-height: 84rpx;
		}
	}

	.popup {
		background: #fff;
		margin-top: 104rpx;

		.pop_tab_nav {
			height: 85rpx;
			padding: 0 45rpx;
		}

		.pop_scroll {
			height: 630rpx;
			padding: 0 0 0 45rpx;
			position: relative;

			&.i {
				padding: 0;
			}

			.pop_left {
				width: 200rpx;
				height: 100%;
				float: left;
				background: #fff;
			}

			.pop_left .item {
				width: 100%;
				height: 100rpx;
				line-height: 100rpx;
				padding-right: 20rpx;
				padding-left: 40rpx;
				color: #333333;
				position: relative;
				font-size: 28rpx;
			}

			.pop_left .item.active {
				color: var(--primary);
			}

			.pop_left .item.active::after {
				content: '';
				position: absolute;
				z-index: 1;
				width: 5rpx;
				height: 80rpx;
				display: block;
				left: 10rpx;
				top: 50%;
				transform: translateY(-50%);
				background: var(--primary);
				border-radius: 5rpx;
			}

			.pop_right {
				float: left;
				width: 550rpx;
				height: 100%;
				background: #F6F8FE;
			}

			.scroll_item {
				border: 1px solid #F5EEEE;
				width: 152rpx;
				height: 65rpx;
				line-height: calc(65rpx - 2px);
				text-align: center;
				color: #666666;
				font-size: 24rpx;
				border-radius: 8rpx;
				margin-right: 15rpx;
				margin-top: 20rpx;
				padding: 0 10rpx;
				display: inline-block;
				vertical-align: top;

				&.active {
					border: 1px solid var(--primary);
					color: var(--primary);
				}
			}
		}

		.pop_bottom {
			width: 750rpx;
			height: 98rpx;
			background: #FFFFFF;
			box-shadow: 0rpx -1rpx 0rpx 0rpx rgba(0, 0, 0, 0.05);
			padding-left: 45rpx;
			padding-right: 30rpx;

			.bt1 {
				width: 152rpx;
				height: 74rpx;
				background: rgba(0, 103, 211, .1);
				border-radius: 8rpx;
				font-size: 28rpx;
				color: var(--primary);
				line-height: 74rpx;
				text-align: center;
			}

			.bt2 {
				margin-left: 35rpx;
				width: 486rpx;
				height: 74rpx;
				line-height: 74rpx;
				text-align: center;
				font-size: 28rpx;
				color: #FFFFFF;
				background: var(--primary);
				border-radius: 8rpx;
			}
		}

		.city_item {

			font-size: 26rpx;
			color: #333333;
			line-height: 100rpx;

			&.active {
				font-weight: bold;
				color: var(--primary);
			}
		}
	}

	.recomd_item {
		padding: 25rpx 30rpx 20rpx;
		width: 690rpx;
		background: #FFFFFF;
		border-radius: 18rpx;
		margin-bottom: 20rpx;

		.label {
			display: inline-block;
			vertical-align: top;
			height: 38rpx;
			background: #F7F7F7;
			border-radius: 4rpx;
			line-height: 38rpx;
			text-align: center;
			font-size: 20rpx;
			color: #A5A5A5;
			padding: 0 14rpx;
			margin-top: 20rpx;
			margin-right: 18rpx;
		}

		.bt {
			border-top: 1px solid #eee;
		}
	}.ico13{width: 13rpx;height: 8rpx;}
	.plr60{padding-left: 60rpx;padding-right: 60rpx;}
</style>